<template>
  <el-dialog title="打印" :visible.sync="openOne" width="780px" append-to-body :before-close="close">
    <div id="printMe" ref="pdf" v-loading="loading" class="main">
      <div class="top">
        <img src="@/assets/print/logo.png" alt="">
        <p>无锡速捷配国际物流有限公司</p>
      </div>
      <p class="title">PICKING LIST</p>
      <div class="main_title">
        <div class="main_title_1">
          <span>Customer:</span>
          <span class="text">客户代码</span>
        </div>
        <div class="main_title_1">
          <span>PL NO:</span>
          <span class="red text"><span v-if="NO" style="margin: 0;">*</span>{{ NO }}<span v-if="NO">*</span></span>
        </div>
      </div>
      <div class="main_title">
        <div class="main_title_1">
          <span>出库订单号:</span>
          <span class="text">{{ warehouseOut.warehouse_out_id }}</span>
        </div>
        <div class="main_title_1">
          <div class="main_title_2">
            <span>INV#:</span>
            <span class="text2" />
          </div>
          <div class="main_title_2">
            <span>Order#:</span>
            <span class="text2" />
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top: 20px;"
      >
        <el-table-column
          prop="id"
          label="ITEM"
          width="60"
        />
        <el-table-column
          prop="created_at"
          label="日期"
        />
        <el-table-column
          prop="goods_name"
          label="物料型号"
          width="120"
        />
        <el-table-column
          prop="number"
          label="QTY"
          width="80"
        />
        <el-table-column
          prop="box_number"
          label="CTN QTY"
          width="80"
        />
        <el-table-column
          prop="plt"
          label="PLT QTY"
          width="80"
        />
        <el-table-column
          prop="wh"
          label="WH Blance QTY"
        />
        <el-table-column
          prop="fp"
          label="分配方式"
        />
      </el-table>
      <el-table
        :data="tableData2"
        border
        style="width: 100%;margin-top: 20px;"
      >
        <el-table-column
          prop="id"
          label="ITEM"
          width="65"
        />
        <el-table-column
          prop="goods_name"
          label="物料型号"
          width="110"
        />
        <el-table-column
          prop="xh"
          label="项号"
          width="60"
        />
        <el-table-column
          prop="fcr"
          label="FCR#"
        />
        <el-table-column
          prop="name"
          label="LOC"
          width="70"
        />
        <el-table-column
          prop="number"
          label="PICK QTY"
          width="60"
        />
        <el-table-column
          prop="ys"
          label="余数"
          width="50"
        />
        <el-table-column
          prop="config_id"
          label="LPN NO"
        />
        <el-table-column
          prop="ctn"
          label="CTN ID"
          width="50"
        />
        <el-table-column
          prop="sn"
          label="SN"
          width="50"
        />
      </el-table>
      <div class="main_title">
        <div class="main_title_1">
          <span>Received By:</span>
          <span class="text2" />
        </div>
        <div class="main_title_1">
          <span>Received Date Time:</span>
          <span class="text2" />
        </div>
      </div>
      <div class="main_title">
        <div class="main_title_1">
          <span>Printed By:</span>
          <span class="text2" />
        </div>
        <div class="main_title_1">
          <span>Printed Date Time:</span>
          <span class="text2" />
        </div>
      </div>
    </div>
    <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
      <el-col :span="24">
        <el-button v-print="'#printMe'" type="primary" size="medium">打印</el-button>
        <el-button type="primary" size="medium" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { exportData } from '@/api/storehouse'
import { downloadPDF } from '@/utils/pdf'
export default {
  name: 'Print',
  props: {
    openOne: {
      type: Boolean
    },
    warehouseId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      tableData: [{
        item: '0010',
        date: '2023/3/16',
        wl: 'LQ080Y5LX12A',
        qty: 1000,
        ctn: 100,
        plt: 5,
        wh: '',
        fp: '自动分配'
      }, {
        item: '0020',
        date: '2023/3/16',
        wl: 'LS120M5LX03B',
        qty: 64,
        ctn: 8,
        plt: 1,
        wh: '',
        fp: '手动分配'
      }, {
        item: '',
        date: '',
        wl: '',
        qty: 1064,
        ctn: 108,
        plt: 6,
        wh: ''
      }],
      tableData2: [{
        item: '0010',
        xh: '22779',
        wl: 'LQ080Y5LX12A',
        fcr: 'IN-Jabil23031601',
        loc: 'PA0101',
        pick: 200,
        ys: '',
        lpn: 'WSEC20230316001'
      }, {
        item: '0010',
        xh: '22779',
        wl: 'LQ080Y5LX12A',
        fcr: 'IN-Jabil23031601',
        loc: 'PA0102',
        pick: 200,
        ys: '',
        lpn: 'WSEC20230316001'
      }, {
        item: '0010',
        xh: '22779',
        wl: 'LQ080Y5LX12A',
        fcr: 'IN-Jabil23031601',
        loc: 'PA0103',
        pick: 200,
        ys: '',
        lpn: 'WSEC20230316001'
      }, {
        item: '0010',
        xh: '22779',
        wl: 'LQ080Y5LX12A',
        fcr: 'IN-Jabil23031601',
        loc: 'PA0104',
        pick: 200,
        ys: '',
        lpn: 'WSEC20230316001'
      }, {
        item: '0010',
        xh: '22779',
        wl: 'LQ080Y5LX12A',
        fcr: 'IN-Jabil23031601',
        loc: 'PA0105',
        pick: 64,
        ys: '',
        lpn: 'WSEC20230316001'
      }, {
        item: '0020',
        xh: '22779',
        wl: 'LS120M5LX03B',
        fcr: 'IN-Jabil23031601',
        loc: 'PA0201',
        pick: 200,
        ys: '',
        lpn: 'WSEC20230316001'
      }, {
        item: '',
        xh: '',
        wl: '',
        fcr: '',
        loc: 'Total:',
        pick: 1064,
        ys: '',
        lpn: ''
      }],
      NO: '',
      warehouseOut: {},
      loading: false
    }
  },
  watch: {
    'openOne': function(newValue, oldValue) {
      if (newValue === true) {
        this.printList()
      }
    }
  },
  methods: {
    handleExport() {
      downloadPDF(this.$refs.pdf)
    },
    printList() {
      const that = this
      const data = this.warehouseId
      exportData(data).then(response => {
        console.log(response)
        if (response.code === 10000) {
          that.loading = true
          that.NO = response.data.pick_no
          that.warehouseOut = response.data.warehouseOut
          that.tableData = response.data.warehouseOutSon
          let qty = 0
          let ctn = 0
          const plt = 0
          that.tableData.forEach((item, index) => {
            item.created_at = item.created_at.substring(0, 10)
            qty += item.number
            ctn += item.box_number
          })
          const finObj = { goods_name: 'Total:', number: qty, box_number: ctn, plt }
          that.tableData.push(finObj)
          that.tableData2 = response.data.pick
          let pick = 0
          const finObj2 = { name: 'Total:', number: pick }
          that.tableData2.forEach((item, index) => {
            pick += item.number
          })
          finObj2.number = pick
          that.tableData2.push(finObj2)
          that.loading = false
        }
      })
    },
    close() {
      this.$emit('update:openOne', false)
    }
  }
}
</script>
<style lang="scss" scoped>
p {
    padding: 0;
    margin: 0;
    font-family: 宋体
}

div {
    font-family: 宋体;
}

.main {
    width: 100%;
    background: #fff;
    padding: 0px 20px;
    margin:auto;
    .top {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      padding-bottom: 2px;
      border-bottom: 1px solid #000;
      img {
        width: 100px;
        height: 30px;
      }
      p {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .title {
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      margin-top: 20px;
      color: red;
    }
    .main_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      .main_title_1 {
        width: 50%;
        height: 20px;
        display: flex;
        .red {
          color: red;
        }
        .text {
          border-bottom: 1px solid #000;
          padding-bottom: 1px;
        }
        span {
          margin-right: 10px;
        }
        .main_title_2 {
          width: 50%;
          height: 20px;
          display: flex;
          align-items: center;
          span {
            margin-right: 10px;
          }
          .text2 {
            width: 50px;
            height: 30px;
            border-bottom: 1px solid #000;
            padding-bottom: 2px;
          }
        }
      }
    }
}

</style>

